<%@page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" import="java.sql.*"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chi tiết sản phẩm</title>
        <script type="text/javascript" src="jquery-1.8.2.js"></script>
        <link rel="stylesheet" type="text/css" href="cloudzoom.css" />
        <script type="text/javascript" src="cloudzoom.js"></script>
        <script type="text/javascript">
            CloudZoom.quickStart();
        </script>  
    </head>
    <body>
        <div id="baby_wrapper_outter">

            <div id="baby_wrapper_inner">
                <%@include file="top.jsp"%>
                <div id="baby_content_wrapper">

                    <div id="baby_left_sidebar_wrapper">

                        <%@include file="left.jsp"%>

                    </div> 
                    <div id="baby_right_sidebar_wrapper">

                        <%@include file="right.jsp"%>

                    </div> 

                    <div id="baby_content">
                        <div class="content_section">
                            <c:if test="${requestScope.listshow==null}">
                                <c:redirect url="Show"/>
                            </c:if>
                            <div class="content_section11" style="border-radius:5px;
                                 box-shadow:0 0px 5px rgba(0,0,0,0.4);
                                 width: 45%;
                                 padding-top: 30px;
                                 padding-right: 0;
                                 padding-bottom: 30px;
                                 margin-bottom: 30px;
                                 margin-left: 0;
                                 margin-right: 0;
                                 margin-top: 30px;
                                 float: left;">


                                <table>
                                    <c:forEach items="${requestScope.listshow}" var="sp">

                                        <tr>
                                            <td width="300" height="255">
                                                <img class = "cloudzoom" src =${sp.image}  width="250" height="200"/>
                                            </td>
                                        </tr>
                                    </c:forEach>

                                </table>
                            </div>

                            <div class="content_section21" style=" border-radius:5px;
                                 box-shadow:0 0px 5px rgba(0,0,0,0.4);
                                 width: 40%;
                                 padding-left: 5px;
                                 padding-bottom: 30px;
                                 padding-top: 30px;
                                 margin-bottom: 30px;
                                 margin-right: 30px;
                                 margin-top: 30px;
                                 float: right;">
                                <form method='get' action='cart'>
                                    <table > 
                                        <c:forEach items="${requestScope.listshow}" var="sp">

                                            <tr>

                                                <td style="color: #200b20; font-size: 15px">
                                                    Sản phẩm :
                                                </td>
                                                <td style="color: #200b20; font-size: 15px" width="100">
                                                    ${sp.name} 
                                                </td>
                                            </tr>
                                            <tr>

                                                <td style="color: #200b20; font-size: 15px"width="80">
                                                    Giới thiệu :
                                                </td>
                                                <td style="color: #660033; font-size: 15px" width="120" height="100">
                                                    ${sp.detail} 
                                                </td>
                                            </tr>
                                            <tr>

                                                <td style="color: #200b20; font-size: 15px">
                                                    Nhãn hiệu :
                                                </td>
                                                <td style="color: darkblue; font-size: 15px">
                                                    ${sp.provider}
                                                </td>
                                            </tr>
                                            <tr>

                                                <td style="color: #200b20; font-size: 15px">
                                                    Giá bán :
                                                </td>
                                                <td style="color: #FF4700; font-size: 15px" width="100">
                                                    ${sp.price}  VND
                                                </td>
                                            </tr>
                                            <tr>

                                                <td style="color: #200b20; font-size: 15px">
                                                    Trạng thái :
                                                </td>
                                                <td style="color: #FF4700; font-size: 15px">
                                                    ${sp.state} 
                                                </td>
                                            </tr>
                                            <c:if test="${sp.state eq 'còn hàng'}">
                                                <tr>
                                                <input type='hidden' name='todo' value='add' />
                                                <td style="color: #200b20; font-size: 15px">
                                                    Số lượng :
                                                </td>

                                                <td style="color: #FF4700; font-size: 15px" width="20">
                                                    <input type='number' maxlength="3" min="1" max="${sp.quantity}" size='3' value='1' name='qty${sp.id}' />
                                                    <input type=hidden value=${sp.id} name=id>
                                                </td>
                                                </tr>

                                                <tr>

                                                    <td style="color: #200b20; font-size: 15px">

                                                    </td>
                                                    <td style="color: #FF4700; font-size: 15px">

                                                        <input type=submit action='add to cart' value='Thêm vào giỏ hàng' style="color: #FF4700"/>

                                                    </td>
                                                </tr>
                                            </c:if>
                                        </c:forEach>

                                    </table>
                                </form>

                            </div>


                        </div>
                    </div>
                    <div class="cleaner"></div>

                </div> <!-- end of baby_content_wrapper -->

            </div> <!-- end of baby_wrapper_inner -->
        </div> <!-- end of baby_wrapper_outter -->
        <%@include file="bottom.jsp"%>
    </body>
</html>